// 6.1 添加子组件  创建子组件模板
<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容（做多吐槽120字）" maxlength="120" v-model="msg"></textarea>

        <mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>
        <div class="cmt-list" v-for="item in comments" :key="item.user_name">
            <div class="cmt-item">
                <div class="cmt-item-title">
                    {{item.user_name}} 发表时间:{{item.add_time | dateFormat}}
                </div>
                <div class="cmt-item-body">
                    {{item.content}}
                </div> 
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMoreData">加载更多</mt-button>
    </div>
</template>


<script>
import {commentslist} from './../../comment/data/taskDetail'
import {Toast} from "mint-ui"

export default {
    data() {
        return {
            pageIndex: 1,
            comments: [],
            msg: ""
        }
    },
    
    created(){
        this.getcommentlist();
    },

    methods: {
        getcommentlist(){
            var url = "api/getcomments/" + this.id + "?pageindex=" + this.pageIndex;
            console.log("get的url:"+url);

           
            this.comments = this.comments.concat(commentslist);
            

            // this.$http.get(url)
            // .then(result => {

            // }); 
        },

        getMoreData(){
            this.pageIndex ++ ;
            this.getcommentlist();
        },

       
        postcomment(){
            if(this.msg.trim().length == 0){
                Toast("评论内容不能够为空");
                return
            }
            var url = "api/postcommen/" + this.id ;

            // 9.4：post请求
            // 第一个参数：提交的url
            // 第二个参数：提交给服务器的对象
            // 第三个参数：表单数据的格式 {emulateJson: true}
            // this.$http.post(url, {
            //     content: this.msg.trim()
            // })
            // .then(result => {

            // })

            var cmt = {
                user_name: "匿名用户0",
                add_time: new Date(),
                content: this.msg
            }

            this.comments.unshift(cmt);
            this.msg = "";
        }
    },

    // 8.3: 子组件中声明属性
    props: [
        "id"
    ]
}
</script>


<style lang="scss" scoped>
.cmt-container {
    h3 {
        font-size: 18px;
    }

    textarea {
        font-size: 14px;
        height: 85px;
        margin: 0px;
    }

    .cmt-list {
        margin: 10px 0px;
        .cmt-item{
            font-size: 13px;
            .cmt-item-title{
                background-color: #ccc;
                line-height: 35px;
            }
            .cmt-item-body {
                line-height: 35px;
                text-indent: 2em;
            }
        }
    }
}
</style>